<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-container>
      <el-header id="fixedNav" :class="{'isFixedCa': navBarFixed}" ><NavMenu></NavMenu></el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>
import Main from "./Main.vue"
import NavMenu from "@/components/common/NavMenu.vue";
import Footer from "@/components/common/Footer.vue";

export default {


  data () {
    return {
      navBarFixed: false,
      navBarTop: 0,
      timer: null
    }
  },


  components: { NavMenu, Footer,Main }
  ,

  
  mounted () {
    window.addEventListener('scroll',this.initHeight);
    this.timer = setInterval(() => {
      let navDom = document.getElementById('fixedNav');
      if (document.readyState === "complete" && navDom){
        this.navBarTop = navDom.offsetTop;
        window.clearInterval(this.timer);
      }
    },500)
  },
  methods: {
    initHeight(){
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop||document.body.scrollTop
      this.navBarFixed = scrollTop >this.navBarTop+60? true:false;
      
    }
  },
    destroyed(){
        //移除监听
        window.removeEventListener('scroll',this.initHeight);
    }
};
</script>

<style scoped>
  .isFixedCa{
    position: sticky;
    top: 0px;
    z-index: 99;
  
}

  .el-header{
    background-color: white;
    
  color: #333;
  text-align: center;
  line-height: 60px;
  }
.el-footer {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #f2f6fc;
  color: #333;

  line-height: 50px;
  padding-left: 120px;
  padding-right: 120px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-footer {
  padding: 0;
}



</style>